import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';

export default class BarStack extends Component {    
  constructor(props){
    super(props);
    this.state = {
      xAxis: [],
      columnData: [],
    }
  }

    initChart = (file) => {
      console.log(this.props)
      console.log(file);
      fetch('/example_files/se/processed_results_bracken/taxonomy_matrices_classified_only/bracken_class_percentage.txt')
        .then(response => response.text())
        .then(blob => {
          const rows = blob.split('\n');
          if(rows[rows.length-1] === ''){
            rows.pop();
          }
          const columnData = [];
          const xAxisData = [];
          for (let i = 0; i < rows.length; i++) {
            const rowData = rows[i].split('\t');
            if(i === 0){
              xAxisData.push(...rowData);
              continue;
            }
            columnData.push({
              name: rowData[0],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
              data: rowData.splice(1)
            });
          }
          const xAxis= [
            {
              type: 'category',
              data: xAxisData.splice(1)
            }
          ];

        var chartDom = document.getElementById('BarStackChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.clustering);
        var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: xAxis,
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: columnData
          };
        this.myChart.setOption(option);
        })
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
        return (
            <div className='w100 h100' id='BarStackChart'></div>
        )
    }
}
